<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_不用柯里化的实现</title>
    <!-- 引入 react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 babel 用于将 jsx转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
</head>
<body>
<div id="test"></div>

<script type="text/babel">

    class Login extends React.Component {
        // 初始化状态
        state = {
            username: '',
            password: ''
        }

        /**
         * saveFormData 的返回值(匿名函数)作为 onChange 事件的回调函数
         */
        saveFormData = (dataType, event) => {
            this.setState({[dataType]: event.target.value});
        }

        // 表单提交事件处理函数
        handleSubmit = (event) => {
            // 阻止默认 表单提交事件 跳转
            event.preventDefault();
            const {username, password} = this.state;
            alert(`你输入的用户名是:${username}, 密码是 ${password}`);
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用户名: <input onChange={(event)=>{this.saveFormData('username', event)}} type="text" name="username"/> &nbsp;
                    密码: <input onChange={(event)=>{this.saveFormData('password', event)}} type="password" name="password"/> &nbsp; &nbsp;
                    <button>登录</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Login/>, document.getElementById("test"));
</script>
</body>
</html>